import React, { Component } from 'react';
import TestItem from './testitem';

import './test.less';

export default class Test extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[ ],
            inputVal:''
        }

        this.handinputval = this.handinputval.bind(this);
        this.handClick = this.handClick.bind(this);
        this.handDelete = this.handDelete.bind(this);
    }

    handClick() {
        this.setState({
            list:[...this.state.list,this.state.inputVal],
            inputVal:''
        })
    }

    handinputval(e){
        this.setState({
            inputVal: e.target.value
        })
    }

    
    /* handDelete(index){
        const list = [...this.state.list]
        list.splice(index,1)
        this.setState({
            list
        })
    } */
    handDelete(index){
        const list =[...this.state.list];
        list.splice(index,1);
        this.setState({list})
        
    }
    getItems(){
        return(
            this.state.list.map((item,index) =>{
                return (
                    <TestItem 
                        key={index} 
                        index={index} 
                        content={item} 
                        delete={this.handDelete}
                    />
                )
                   

                // return <li key={index} onClick={this.handDelete.bind(this)} >{item}</li>
            })
        )
    }

    render(){
        return(
            <div className="testbox">
                <div className="testheader">
                    <input type="text" placeholder="输入内容" value={this.state.inputVal} onChange={this.handinputval} />
                    <button onClick={this.handClick}>添加</button>
                </div>
                <ul className="testbody">{this.getItems()} </ul>
                
            </div>
        )
        
    }
}
